<template>
<a-card :bordered="false">
    <div class="traffic_wrapper">
			<div class="headline">
				<h4>维修管理系统</h4>
			</div>
			<div class="main">
			<div class="chart_L">
				<div class="chart01 monitor">
					<div class="part_title"><h5>人员在位情况</h5></div>
					<ul class="worker">
						<li><span>686</span><br/> 总人数</li>
						<li><span>189</span><br/> 在位</li>
						<li><span>282</span><br/>不在位</li>
						<div class="clear"></div>
					</ul>
					<div class="" style="float:left; width:85%;">
                        <div ref="char1" style="height:230px;"></div>
					</div>
				</div>
				<div class="chart01">
					<div class="part_title"><h5>今年各维修合同数量</h5></div>
					<div class="transport">
						<ul>
							<li><b>176</b><br/><span>整车和总成</span></li>
							<li><b>99</b><br/><span>工程装备</span></li>
							<li><b>57</b><br/><span>轮式装备小修</span></li>
							<li><b>32</b><br/><span>工程装备小修</span></li>
							<li><b>31</b><br/><span>技术支援保障</span></li>
						</ul>
					</div>
					<div class="transport_chart" style="float:left;width:250px">
                        <div ref="char2" style="height:220px"></div>
					</div>
				</div>
				
				
			</div>
			<div class="chart_M">
				<div style="width:100%;">
					<div class="chart02" style="height:250px;">
						<div class="part_title"><h5>今年车辆维修</h5></div>
						<ul class="worker">
							<li><span>686</span><br/>本年已修车辆数</li>
							<li><span>189</span><br/>本月已修车辆数</li>
							<li><span>282</span><br/>现修车辆数</li>
							<div class="clear"></div>
						</ul>
						<div class="" style="float:left; width:80%;">
							<div ref="char3" style="height:210px;"></div>
						</div>
					</div>
					<div class="chart02">
						<div class="part_title"><h5>今年各维修类型占比</h5></div>
						<div class="transport" style="width:40%;">
							<!-- <h5>▍运量总数据</h5> -->
							<ul>
								<li><b>31</b><br/><span>整车</span></li>
								<li><b>57</b><br/><span>总成</span></li>
								<li><b>176</b><br/><span>工程装备大修</span></li>
								<li><b>99</b><br/><span>工程装备中修</span></li>
							</ul>
						</div>
						
						<div class="" style="float:left; width:60%;">
							<div ref="char5" style="height:210px;width:80%;"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="chart_R">
				<div class="chart01">
					<div class="part_title"><h5>今年计划与实际维修分析</h5></div>
					<div class="">
						<!-- <img src="../bigscreen/img/chart04.png" style="width:100%;"> -->
                        <div ref="char4" style="height:230px;"></div>
					</div>
				</div>
				<div class="chart01">
					<div class="part_title"><h5>各车型维修占比</h5></div>
					<!-- <div class="transport">
						<ul>
							<li><b>30991</b><br/><span>累计发货量</span></li>
							<li><b>2621</b><br/><span>当天计划</span></li>
							<li><b>74092</b><br/><span>累计发件</span></li>
							<li><b>41459</b><br/><span>累计收件</span></li>
							<li><b>28653</b><br/><span>当天发件</span></li>
							<li><b>16301</b><br/><span>当天收件</span></li>
						</ul>
					</div> -->
					<div class="transport_chart">
						<div ref="char6" style="height:210px;"></div>
					</div>
				</div>
				
			</div>
			<div style="clear:both;"></div>
			<div class="chart_L" style="width:1310px; margin-right:10px;">
			   <!-- 服务网点 -->
			   <div class="chart03 bus_infor">
			   	<div class="part_title"><h5>维修进度跟踪表格</h5></div>
			   	<table>
			   		<tr>
			   			<th>送修单位</th>
			   			<th>维修编号</th>
			   			<th>合同编号</th>
			   			<th>型号</th>
			   			<th>车牌号</th>
			   			<th>设备编号</th>
			   			<th>维修类型</th>
						<th>维修厂</th>
						<th>维修状态</th>
			   		</tr>
			   		<tr>
			   			<td>装甲部队</td>
			   			<td>SCH2345654</td>
			   			<td>HT024522</td>
			   			<td>东风</td>
			   			<td>豫A245226</td>
			   			<td>BH-45255</td>
			   			<td>小维修</td>
						<td>7438工厂</td>
						<td><span>维修中</span></td>
			   		</tr>
			   		<tr>
			   			<td>装甲部队</td>
			   			<td>SCH2345654</td>
			   			<td>HT024522</td>
			   			<td>东风</td>
			   			<td>豫A245226</td>
			   			<td>BH-45255</td>
			   			<td>小维修</td>
			   			<td>7438工厂</td>
			   			<td><span>维修中</span></td>
			   		</tr>
			   		<tr>
			   			<td>装甲部队</td>
			   			<td>SCH2345654</td>
			   			<td>HT024522</td>
			   			<td>东风</td>
			   			<td>豫A245226</td>
			   			<td>BH-45255</td>
			   			<td>小维修</td>
			   			<td>7438工厂</td>
			   			<td><i>等待中</i></td>
			   		</tr>
			   		<tr>
			   			<td>装甲部队</td>
			   			<td>SCH2345654</td>
			   			<td>HT024522</td>
			   			<td>东风</td>
			   			<td>豫A245226</td>
			   			<td>BH-45255</td>
			   			<td>小维修</td>
			   			<td>7438工厂</td>
			   			<td><span>维修中</span></td>
			   		</tr>
			   		<tr>
			   			<td>装甲部队</td>
			   			<td>SCH2345654</td>
			   			<td>HT024522</td>
			   			<td>东风</td>
			   			<td>豫A245226</td>
			   			<td>BH-45255</td>
			   			<td>小维修</td>
			   			<td>7438工厂</td>
			   			<td><span>维修中</span></td>
			   		</tr>
			   	</table>
			   </div>
			</div>

		    <div class="chart_R">
		    	<div class="chart02 ranking">
		    		<div class="part_title"><h5>维修工工时排行</h5></div>
		    		<table>
		    		    <tr>
		    				<td style="width:20%;"><span><i>1</i></span></td>
		    				<td style="width:20%;">李中冰</td>
		    				<td style="width:50%;">2022/05/13 16:15</td>
		    				<td style="width:10%;">未预约</td>
		    			</tr>
		    			<tr>
		    				<td><span><i>2</i></span></td>
		    				<td>傅智翔</td>
		    				<td>2022/05/13 16:15</td>
		    				<td>已预约</td>
		    			</tr>
		    			<tr>
		    				<td><span><i>3</i></span></td>
		    				<td>阮建安</td>
		    				<td>2022/05/13 16:15</td>
		    				<td>未预约</td>
		    			</tr>
		    			<tr>
		    				<td><span>4</span></td>
		    				<td>张伟峰</td>
		    				<td>2022/05/13 16:15</td>
		    				<td>已预约</td>
		    			</tr>
		    			<tr>
		    				<td><span>5</span></td>
		    				<td>刘姿婷</td>
		    				<td>2022/05/13 16:15</td>
		    				<td>已预约</td>
		    			</tr>
						<tr>
							<td><span>6</span></td>
							<td>罗秋蒙</td>
							<td>2022/05/13 16:15</td>
							<td>已预约</td>
						</tr>
		    		</table>
		    	</div>
		    </div>
		</div>
	</div>
    		
</a-card>

</template>

<script>
import * as echarts from 'echarts'
import 'video.js/dist/video-js.css'
import "videojs-contrib-hls"
import notification from 'ant-design-vue/es/notification'
import request from '@/utils/request'
import defaultSettings from '@/config/defaultSettings'
import vueSeamlessScroll from 'vue-seamless-scroll'
import screenfull from "screenfull";
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
    name: 'bigScreen',
    components: {
        vueSeamlessScroll
    },
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#11192e')
    },
 
    beforeDestroy() {
       document.querySelector('body').removeAttribute('style')
    },

    data () {
        return {
            defaultSettings,
            isFullscreen: false,
            token:null,
            char1:null,
            char2:null,
            char3:null,
            char4:null,
            char5:null,
            char6:null,
        }
    },
    // 监听属性 类似于data概念
    computed: {
        

    },
    created () {
       this.token=sessionStorage.getItem(ACCESS_TOKEN)
    },
    mounted () {
        let that = this
        
        that.$nextTick(() => {
            that.query()
            if (screenfull.isEnabled) {
                screenfull.on('change', this.fullChange)
            }
        })
    },
    destroy () {
        if (screenfull.isEnabled) {
            screenfull.off('change', this.fullChange)
        }
    },
    methods: {
        fullChange (){
            this.isFullscreen = screenfull.isFullscreen
        },
        //全屏
        fullScreen () {
            if (!screenfull.isEnabled) {
                return false
            }
            //全屏
            screenfull.toggle();
        },
        query(){
           this.setChar1()
           this.setChar2()
           this.setChar3()
           this.setChar4()
           this.setChar5()
           this.setChar6()
        },
       
        setChar1(){
            if(!this.char1){
                this.char1 = echarts.init(this.$refs.char1)
            }
            
            let option = {
               
                "tooltip": {
                    "trigger": "axis",
                    "axisPointer": {"type": "shadow",textStyle: { color: "#3ec5fd"}},
                },
                "grid": {
                    "borderWidth": 0,
                    "top": 10,
                    "bottom": 30,
                    "right":0,
                    textStyle: {color: "#3ec5fd"}
                },
                "legend": {
                    x: '4%',
                    top: '8%',
                    textStyle: {color: '#3ec5fd',},
                    "data": ['不在位', '在位']
                },
                "calculable": true,
                "xAxis": [{
                    "type": "category",
                    "axisLine": {
                        lineStyle: {color: '#3ec5fd'}
                    },
                    "splitLine": { "show": false},
                    "axisTick": {"show": false},
                    "splitArea": { "show": false},
                    "axisLabel": {"interval": 0,},
                    "data": ['人力资源部','财务审计处','厂工会','生产技术处','质量检验处','物业保卫处','民品分厂','军品分厂'],
                }],
                "yAxis": [{
                    "type": "value",
                    "splitLine": {"show": false},
                    "axisLine": {lineStyle: {color: '#3ec5fd'}},
                    "axisTick": {"show": false},
                    "axisLabel": {"interval": 0,},
                    "splitArea": {"show": false},

                }],
                "dataZoom": [{
                    "show": true,
                    "height": 10,
                    "xAxisIndex": [0],
                    bottom: 35,
                    "start": 10,
                    "end": 80,
                    handleStyle:{color:"#d3dee5",},
                    textStyle:{ color:"#fff"},
                    borderColor:"#90979c"
                }, {
                    "type": "inside",
                    "show": true,
                    "height": 15,
                    "start": 1,
                    "end": 35
                }],
                "series": [{
                        "name": "不在位",
                        "type": "bar",
                        "stack": "总量",
                        "barMaxWidth": 35,
                        "barGap": "10%",
                        "itemStyle": {
                            "normal": {
                                "color": "rgba(255,144,128,1)",
                                "label": {
                                    "show": true,
                                    "textStyle": {
                                        "color": "#fff"
                                    },
                                    "position": "inside",
                                    formatter: function(p) {
                                        return p.value > 0 ? (p.value) : '';
                                    }
                                }
                            }
                        },
                        "data": [2,5,3,9,8,7,1,3],
                    },

                    {
                        "name": "在位",
                        "type": "bar",
                        "stack": "总量",
                        "itemStyle": {
                            "normal": {
                                "color": "rgba(0,191,183,1)",
                                "barBorderRadius": 0,
                                "label": {
                                    "show": true,
                                    "position": "inside",
                                    formatter: function(p) {
                                        return p.value > 0 ? (p.value) : '';
                                    }
                                }
                            }
                        },
                        "data": [11,23,59,6,2,11,96,110,115]
                    }
                ]
            }
            this.char1.setOption(option)
        },
        setChar2(){
            if(!this.char2){
                this.char2 = echarts.init(this.$refs.char2)
            }
            
            let option = {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: "{b}: {c} ({d}%)"
                },
               
                series: [{
                    type: 'pie',
                    selectedMode: 'single',
                    label: {
                        normal: {
                            position: 'inner',
                            formatter: '{c}',

                            textStyle: {
                                color: '#fff',
                                fontWeight: 'bold',
                                fontSize: 14
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{value: 31,name: '技术支援保障'}, {value: 57,name: '轮式装备小修'}, {value: 99,name: '工程装备'}, {value: 176,name: '整车和总成'}, {value: 32,name: '工程装备小修'}]
                }]
            }
            this.char2.setOption(option)
        },
         setChar3(){
            if(!this.char3){
                this.char3 = echarts.init(this.$refs.char3)
            }
            let option={
                title:{
                    show:false,
                    text:'adasda',
                    
                },
                "tooltip": {
                    "trigger": "axis",
                    "axisPointer": {"type": "line"},
                },
                "grid": {
                    show:true,//是否显示网格
                    borderColor:'red',//网格颜色
                    borderWidth:0,//网格宽度
                    left: "1%",
                    top: "10%",
                    right: "1%",
                    bottom: "3%",
                    containLabel:true,//是否防止标签溢出
                },
                "xAxis": [{
                    "type": "category",
                    "axisLine": {
                        lineStyle: {color: '#3ec5fd'}
                    },
                    "splitLine": { "show": false},
                    "axisTick": {"show": false},
                    "splitArea": { "show": false},
                    "data": ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                }],
                "yAxis": [{
                    "type": "value",
                    "splitLine": {"show": false},
                    "axisLine": {lineStyle: {color: '#3ec5fd'}},
                    "axisTick": {"show": false},
                    "splitArea": {"show": false},

                }],
                series: [{
                    type: 'line',
                    symbol: 'circle',
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            color: '#3ec5fd',//拐点数值颜色
                        }
                    },
                    itemStyle: {
                        color: "#6c50f3",//折线颜色
                        borderColor: "#fff",//折线拐点颜色
                        borderWidth: 3,//折线拐点大小
                        
                    },        
                    data: [10, 20, 33, 28, 39, 21, 52,36,25,98,74,99]
                }]
             
            }
            this.char3.setOption(option)
        },
        setChar4(){
            if(!this.char4){
                this.char4 = echarts.init(this.$refs.char4)
            }
            
            let option = {
               
                "tooltip": {
                    "trigger": "axis",
                    "axisPointer": {"type": "shadow",textStyle: { color: "#3ec5fd"}},
                },
                "grid": {
                    "borderWidth": 0,
                    "top": 10,
                    "bottom": 30,
                    "right":0,
                    textStyle: {color: "#3ec5fd"}
                },
                "legend": {
                    x: '4%',
                    top: '8%',
                    textStyle: {color: '#3ec5fd',},
                    "data": ['计划', '实际']
                },

                "xAxis": [{
                    "type": "category",
                    "axisLine": {
                        lineStyle: {color: '#3ec5fd'}
                    },
                    "splitLine": { "show": false},
                    "axisTick": {"show": false},
                    "splitArea": { "show": false},
                    "axisLabel": {"interval": 0,},
                    "data": ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
                }],
                "yAxis": [{
                    "type": "value",
                    "splitLine": {"show": false},
                    "axisLine": {lineStyle: {color: '#3ec5fd'}},
                    "axisTick": {"show": false},
                    "axisLabel": {"interval": 0,},
                    "splitArea": {"show": false},

                }],
                
                "series": [{
                        "name": "计划",
                        "type": "bar",
                        "stack": "总量",
                        "barMaxWidth": 35,
                        "barGap": "10%",
                        "itemStyle": {
                            "normal": {
                                "color": "rgba(255,144,128,1)",
                                "label": {
                                    "show": true,
                                    "textStyle": {
                                        "color": "#fff"
                                    },
                                    "position": "inside",
                                    formatter: function(p) {
                                        return p.value > 0 ? (p.value) : '';
                                    }
                                }
                            }
                        },
                        "data": [2,5,3,9,8,7,1,3],
                    },

                    {
                        "name": "实际",
                        "type": "bar",
                        "stack": "总量",
                        "itemStyle": {
                            "normal": {
                                "color": "rgba(0,191,183,1)",
                                "barBorderRadius": 0,
                                "label": {
                                    "show": true,
                                    "position": "inside",
                                    formatter: function(p) {
                                        return p.value > 0 ? (p.value) : '';
                                    }
                                }
                            }
                        },
                        "data": [11,23,59,6,2,11,96,110,115]
                    }
                ]
            }
            this.char4.setOption(option)
        },
         setChar5(){
            if(!this.char5){
                this.char5 = echarts.init(this.$refs.char5)
            }
            
            let option = {
                tooltip: {
                    show: true,
                    trigger: 'item',
                    formatter: "{b}: {c} ({d}%)"
                },
               
                series: [{
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['25%', '80%'],
                    label: {
                        normal: {
                            position: 'inner',
                            formatter: '{c}',

                            textStyle: {
                                color: '#fff',
                                fontWeight: 'bold',
                                fontSize: 14
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [{value: 31,name: '整车'}, {value: 57,name: '总成'}, {value: 99,name: '工程装备大修'}, {value: 176,name: '工程装备中修'}]
                }]
            }
            this.char5.setOption(option)
        },
        setChar6(){
            if(!this.char6){
                this.char6 = echarts.init(this.$refs.char6)
            }
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                series: [
                    {
                        type: 'pie',
                        label: {
                            show: true,
                            fontSize:12,
                            color: "#ffffff",
                        },
                        
                        roseType: 'area',
                        data: [
                            {value: 25, name: '依维柯'},
                            {value: 30, name: '装甲'},
                            {value: 30, name: '履带'},
                            {value: 25, name: '指挥'},
                            {value: 25, name: '其他'},
                        ]
                    }
                ]
            }
            this.char6.setOption(option)

        }
       
    }
}
</script>


<style lang="less" scoped> 
   

body,div,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4{margin:0;padding:0;font-style:normal;font-family: "微软雅黑";}
ol,ul,li{list-style:none; margin:0; padding:0;}
img{border:0;vertical-align:middle;}
body{color:#c3dcf2;background:#FFFFFF;}



.clear{clear:both;height:1px;width:100%;overflow:hidden;margin-top:-1px;}
a{color:#fff;text-decoration:none;}
a:hover{color:#BA2636;text-decoration:none;}
*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;margin:0; padding:0; border:none;} 
html,body{min-width:1200px;}

@font-face{
            font-family:'Digital-7Mono';
            src:url('Impact.ttf');
        }
/* 智慧公交大屏 */
body{background: #11192e;}
.traffic_wrapper{ background: url(../bigscreen/img/map.jpg) no-repeat; background-size:100% 100vh; min-width:1900px;min-height:900px;}
.headline{ height:108px; background:url(../bigscreen/img/top.png) no-repeat; background-size:100% 100%;  position:relative;}
.headline h4{ text-align:center; font-size:36px; line-height:60px;color: #ffffff;font-weight:bold; }
/*内容*/
.main{ width:1900px; margin:0 auto; padding:0 10px 0 10px; margin-top:-50px;}
.main .chart_L{width:560px; float:left;}
.main .chart_M{width:760px; float:left; padding:20px 10px 0 10px; }
.main .chart_R{width:560px; float:left;}

.chart01{ background: url(img/plate_bg.png) repeat-y; background-size:100% 100%; height:270px; clear:both; border:1px solid #0e3859; padding:14px; position:relative; margin-bottom:14px;}



.chart02{background: url(../bigscreen/img/plate_bg.png) repeat-y; background-size:100% 100%; height:270px; clear:both; border:1px solid #0e3859; padding:14px; position:relative; margin-bottom:14px;}
.chart03{background: url(../bigscreen/img/plate_bg.png) repeat-y; background-size:100% 100%; height:270px; clear:both; border:1px solid #0e3859; padding:14px; position:relative; margin-bottom:14px;}
.part_title{ background:url(../bigscreen/img/title_bg.png) no-repeat;height:32px;line-height:32px;padding-left: 16px; font-size:18px; color:#FFFFFF; text-shadow:2px 0px 6px #0064ff;}
.part_title h5{ color:#ffffff;}




/* 人员在位情况*/ 
ul.worker{width:15%; float:left;}
ul.worker li{ padding:4px 0; font-size:14px; color:#3ec5fd;}
ul.worker li span{display:inline-block; width:100%;font-family:"Impact"; color:#ffffff; font-size:24px; margin-bottom:0px;} 
ul.worker.service_bus li{ width:50%; float:left;}

/* 各部队维修车辆占比 */


 
 /* 维修进度跟踪表格 */
 .bus_infor table{ width:100%; font-size:13px; margin-top:10px;}
 .bus_infor table tr{ }
 .bus_infor table tr th{text-align:left;background-color:#1b3d5f; height:28px; padding-left:6px;color: #c3dcf2;}
 .bus_infor table tr td{ height:32px; line-height:32px;border-bottom:1px dotted #055aa1; color: #c3dcf2; } 
  
/* 服务网点 */
.network{}
   .abnormal { float:left; margin-right:40px;}
   .abnormal h5{color:#04f3f7; margin-bottom:16px; margin-top:20px;}
   .abnormal ul li{ clear:both; height:40px; width:180px;}
   .abnormal ul li span{ display:inline-block; width:130px;}
   .abnormal ul li em{font-style:normal; color:#2ffff3; font-family:impact;}

/* 车辆信息 */
.bus_infor table{ width:100%; font-size:13px; margin-top:10px;}
.bus_infor table tr{ }
.bus_infor table tr th{text-align:left;background-color:#1b3d5f; height:28px; padding-left:6px;}
.bus_infor table tr td{ height:32px; line-height:32px;border-bottom:1px dotted #055aa1; }
.bus_infor table tr td span{background:#02afff; color:#ffffff; display:inline-block; border-radius:3px; width:80px; height:24px; line-height:24px; text-align:center;color: #c3dcf2;}
.bus_infor table tr td i{background:#5f45ff; color:#ffffff; display:inline-block; border-radius:3px; width:80px; height:24px; line-height:24px; text-align:center; font-style: normal;color: #c3dcf2;}
/* 
各部队维修车辆占比 、各维修类型占比、各车型维修占比*/
.transport{ width:280px; float:left;}
   .transport h5{color:#04f3f7; margin-bottom:16px; margin-top:20px;}
   .transport ul li{ float:left; width:45%; background:#13365a; margin:2px; padding:6px 10px; border-radius:4px; font-size:12px; color:#3ec5fd;}
   .transport ul li b{color:#ffffff; font-family:impact; font-size:22px; font-weight:normal; background: url(img/kehuoyou06.png) no-repeat; padding-left:20px;}
    .transport ul li span{ margin-left:20px;}
.list-data .transport_chart{float:left;}
 .transport_chart h5{color:#04f3f7; margin-bottom:16px; margin-top:20px;}
/* 访客分析 */
.ranking table{ width:100%;}
.ranking table td{ border-bottom:1px dotted #055aa1; height:32px; line-height:32px; font-size:13px;color: #c3dcf2; }
.ranking table td span{background:#02afff;color:#ffffff; display:inline-block;line-height:20px; height:20px; width:20px; text-align:center; border-radius:50%;}
.ranking table td span i{background:#ff8a00;color:#ffffff; display:inline-block;line-height:20px; height:20px; width:20px; font-style:normal; text-align:center; border-radius:50%; color: #c3dcf2;}
/* 物资储备 */
</style>

